<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title> 后台首页 </title>

    <link rel="shortcut icon" href="../A_CommonRes/img/favicon.ico">
    <link href="../A_CommonRes/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../A_CommonRes/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="../A_CommonRes/css/animate.css" rel="stylesheet">
    <link href="../A_CommonRes/css/style.css?v=4.1.0" rel="stylesheet">

    <!-- 全局js -->
    <script src="../A_CommonRes/js/jquery.min.js?v=2.1.4"></script>
    <script src="../A_CommonRes/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../A_CommonRes/js/plugins/layer/layer.min.js"></script>
    <!-- Flot -->
    <script src="../A_CommonRes/js/plugins/flot/jquery.flot.js"></script>
    <script src="../A_CommonRes/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../A_CommonRes/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="../A_CommonRes/js/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="../A_CommonRes/js/content.js"></script>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" style='background:#e8cd98; '>
        <div class="row">
			<!-- 左侧功能栏 -->
            <div th:replace="MiniBlog_Back/A_CommonRes/common :: common_header_back"></div>
			<!--  -->
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="row row-sm text-center">
                            <div class="col-xs-6">
                                <div class="panel padder-v item">
                                    <div class="h1 text-info font-thin h1">521</div>
                                    <span class="text-muted text-xs">帖子总数</span>
                                    <!-- div class="top text-right w-full">
                                        <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                    </div -->
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item bg-info">
                                    <div class="h1 text-fff font-thin h1">521</div>
                                    <span class="text-muted text-xs">评论总数</span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item bg-primary">
                                    <div class="h1 text-fff font-thin h1">33</div>
                                    <span class="text-muted text-xs">用户总数</span>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="panel padder-v item" style='background:#f8ac59; ' >
                                    <div class="font-thin h1">129</div>
                                    <span class="text-muted text-xs">在线人数</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title" style="border-bottom:none;background:#fff;">
                                <h5>平台实时访数据</h5>
                            </div>
                            <div class="ibox-content" style="border-top:none;">
                                <div id="flot-line-chart-moving" style="height:217px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style='display:none; '>
                    <div class="col-sm-9" style="padding-right:0;">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title" style="border-bottom:none;background:#fff;">
                                <h5>往年数据</h5>
                            </div>
                            <div class="ibox-content" style="border-top:none;">
                                <div id="yesterday" style="height:217px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3" style="padding-left:0;">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content" style="border-top:none;background-color:#e4eaec;">
                                <h5>新增玩家</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>流失玩家</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-warning">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>新增玩家</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar .progress-bar-danger">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                                <h5>新增玩家</h5>
                                <div class="progress progress-striped active">
                                    <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-info">
                                        <span class="sr-only"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
						<div class='ibox-title'>
							<h5>最新情况</h5>
						</div>
                        <div class="ibox float-e-margins">
                        <div class="" id="ibox-content">

                            <div id="vertical-timeline" class="vertical-container light-timeline">
                                

                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <h2>肖三三</h2>
                                        <p>发布新帖《Java中Collection与Array最具争论性的使用场景，究竟是Collection的落败，还是Array的灭亡？》</p>
										<a class="btn btn-info btn-rounded" style='margin-left:8px; ' >查看</a>
										<a class="btn btn-rounded btn-danger"  >封禁</a>
										
                                        <span class="vertical-date">
											14:21 <br>
											<small>2019-10-11</small>
										</span>
                                    </div>
                                </div>
								<div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <h2>肖二二</h2>
                                        <p>发布新帖《Java中Collection与Array最具争论性的使用场景，究竟是Collection的落败，还是Array的灭亡？》</p>
										<a class="btn btn-info btn-rounded" style='margin-left:8px; ' >查看</a>
										<a class="btn btn-rounded btn-danger"  >封禁</a>
										
                                        <span class="vertical-date">
											14:10 <br>
											<small>2019-10-11</small>
										</span>
                                    </div>
                                </div>
								<div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon blue-bg">
                                        <i class="fa fa-file-text"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <h2>肖一一</h2>
                                        <p>发布新帖《Java中Collection与Array最具争论性的使用场景，究竟是Collection的落败，还是Array的灭亡？》</p>
										<a class="btn btn-info btn-rounded" style='margin-left:8px; ' >查看</a>
										<a class="btn btn-rounded btn-danger"  >封禁</a>
										
                                        <span class="vertical-date">
											14:01 <br>
											<small>2019-10-11</small>
										</span>
                                    </div>
                                </div>

                                
                                
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>最热数据</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="project-list">
                                    <table class="table table-hover">
                                        <tbody>
                                            <tr>
                                                <td class="project-status">
                                                    <span class="label label-warning">已封禁
                                                </span></td>
                                                <td class="project-title">
                                                    <a href="project_detail.html">LIKE－一款能够让用户快速获得认同感的兴趣社交应用</a>
                                                    <br>
                                                    <small>发布于 2014.08.15</small>
                                                </td>
                                                <td class="project-completion"  style='padding:0; ' >
                                                        <small style='font-size:10px;' >热度99</small>
                                                        <div class="progress progress-mini">
                                                            <div style="width: 99%;" class="progress-bar"></div>
                                                        </div>
                                                </td>
                                                <td class="project-people"  >
													<div style='width:100%; overflow-y:auto; height:60px;'>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a3.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a1.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a2.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a4.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a5.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a3.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a1.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a2.jpg"></a>
														<a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a4.jpg"></a>
													</div>
                                                </td>
                                                <td class="project-actions">
                                                    <a  class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                    <a style='background:#f8acac; ' class="btn btn-white btn-sm"><i class="fa fa-warning"></i> 封禁 </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="project-status">
                                                    <span class="label label-primary">正常
                                                </span></td>
                                                <td class="project-title">
                                                    <a href="project_detail.html">LIKE－一款能够让用户快速获得认同感的兴趣社交应用.......................</a>
                                                    <br>
                                                    <small>发布于 2014.08.15</small>
                                                </td>
                                                <td class="project-completion" style='padding:0; ' >
                                                        <small style='font-size:10px;' >热度80888</small>
                                                        <div class="progress progress-mini">
                                                            <div style="width: 80%;" class="progress-bar"></div>
                                                        </div>
                                                </td>
                                                <td class="project-people"  >
													<div style='width:100%; overflow-y:auto; height:50px;'>
                                                    <a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a4.jpg"></a>
                                                    <a ><img alt="image" class="feed-photo" src="../A_CommonRes/img/a5.jpg"></a>
													</div>
                                                </td>
                                                <td class="project-actions">
                                                    <a  class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                    <a style='background:#f8acac; ' class="btn btn-white btn-sm"><i class="fa fa-warning"></i> 封禁 </a>
                                                </td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
			
		</div>
    </div>

    <!--flotdemo-->
    <script type="text/javascript">
        $(function() {
            var container = $("#flot-line-chart-moving");
            var maximum = container.outerWidth() / 2 || 300;
            var data = [];

            function getRandomData() {
                if (data.length) {
                    data = data.slice(1);
                }
                while (data.length < maximum) {
                    var previous = data.length ? data[data.length - 1] : 50;
                    var y = previous + Math.random() * 10 - 5;
                    data.push(y < 0 ? 0 : y > 100 ? 100 : y);
                }
                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[i]])
                }
                return res;
            }
            series = [{
                data: getRandomData(),
                lines: {
                    fill: true
                }
            }];
            var plot = $.plot(container, series, {
                grid: {

                    color: "#999999",
                    tickColor: "#f7f9fb",
                    borderWidth:0,
                    minBorderMargin: 20,
                    labelMargin: 10,
                    backgroundColor: {
                        colors: ["#ffffff", "#ffffff"]
                    },
                    margin: {
                        top: 8,
                        bottom: 20,
                        left: 20
                    },
                    markings: function(axes) {
                        var markings = [];
                        var xaxis = axes.xaxis;
                        for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                            markings.push({
                                xaxis: {
                                    from: x,
                                    to: x + xaxis.tickSize
                                },
                                color: "#fff"
                            });
                        }
                        return markings;
                    }
                },
                colors: ["#4fc5ea"],
                xaxis: {
                    tickFormatter: function() {
                        return "";
                    }
                },
                yaxis: {
                    min: 0,
                    max: 110
                },
                legend: {
                    show: true
                }
            });

            // Update the random dataset at 25FPS for a smoothly-animating chart

            setInterval(function updateRandom() {
                series[0].data = getRandomData();
                plot.setData(series);
                plot.draw();
            }, 40);
        });
    </script>
</body>

</html>
